<template>
	<view class="projectDetail">
		<view class="detail_li">
			<view class="overfont-2 d_l_tit bold">
				{{itemDeteils.itemName}}
			</view>
			<view class="flex" style="margin-bottom: 20rpx;">
				<view
					class="t_t_btn"
					v-for="(item,index) in itemDeteils.itemTagType" :key="index"
				>{{$getDict(item_tag_type,item)}}</view>
			</view>
			<view class="flex f_align f_align_center fb_user_info" >
				<view class="flex">
					<view class="fb_user_head">
						<image class="autoImg" :src="itemDeteils.userHeadUrl" mode=""></image>
					</view>
					<view class="flex f_column f_align">
						<view class="bold">{{itemDeteils.userName}}</view>
						<view class="fb_time">{{itemDeteils.createTime}}</view>
					</view>
				</view>
			</view>
			<view class="fb_pro_handle flex f_align f_align_center">
				<view class="bold">
					浏览数：<text class="tip">{{itemDeteils.viewCount}}</text>
				</view>
				<view class="bold">
					点赞数：<text class="tip">{{itemDeteils.likeCount}}</text>
				</view>
				<view class="bold">
					关注数：<text class="tip">{{itemDeteils.concernCount}}</text>
				</view>
			</view>

			<view class="text_w">
				{{itemDeteils.itemDetail}}
			</view>


			<view class="flex f_warp">
				<view class="detail_image" @click="$wathcImg([pathCode])">
					<image class="autoImg" :src="pathCode" mode=""></image>
				</view>
				<view
					class="detail_image"
					v-for="(item,index) in itemDeteils.detailImgList"
					:key="index"
					@click="$wathcImg(itemDeteils.detailImgList,index)"
				>
					<image class="autoImg" :src="item" mode=""></image>
				</view>
			</view>

			<view v-if="isShare" class="biding_btn bold" @click="screenImageShare">
				我要分享
			</view>
		</view>

		<view class="qrimg" v-if="val != ''">
			<tki-qrcode
				cid="qrcode1" ref="qrcode"
				:val="val" :size="200" unit="upx"
				background="#fff"
				foreground="#000"
				pdground="#000"
				:onval="false"
				:loadMake="true"
				:usingComponents="true"
				:show="false"
				@result="qrCodeSuceess"
			/>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				list:[],
				itemId:'',
				itemDeteils:{
					itemName:'',
					itemDetail:'',
					createTime:'',

					viewCount:1,
					likeCount:0,
					concernCount:0,
					detailImgList:[],
					isLike:'1',
					isConcern:'1',
					itemTagType:[]
				},
				isShare:true,
				val:'https://www.baidu.com',
				pathCode:''
			};
		},
		onLoad(option) {
			if(option){
				this.itemId = option.itemId;
			}
			this.$store.dispatch('getDictlists','item_tag_type');
		},
		computed:{
			...mapState({
				item_tag_type:state => state.dictArrs.item_tag_type
			})
		},
		onShow() {
			this.getItemDetails();
		},
		methods:{
			//二维码生成成功后
			qrCodeSuceess(path){
				const _this = this;
				_this.pathCode = path;
			},
			//详情哦
			async getItemDetails(){
				const _this = this;
				let res = (await _this.$http('/api/auth/item/getUserItem','POST',_this.itemId)).data;
				console.log(res);
				if(res && res.code == '0'){
					let datas =  res.data;
					datas.itemTagType = datas.itemTagType ? datas.itemTagType.split(',') : [];
					_this.itemDeteils = datas;
				}
			},
			screenImageShare(){
				const _this = this;
				_this.isShare = false;
				setTimeout(()=>{
					uni.showLoading({
						title:'生成图片中...'
					});
					_this.$screenshot().then(res=>{
						_this.isShare = true;
						uni.hideLoading();
						uni.saveImageToPhotosAlbum({
							filePath:res,
							success(res) {
								_this.$showToast('保存到本地成功，快用图片去分享吧～')
							}
						})
					}).catch(e=>{
						uni.hideLoading();
						_this.isShare = true;
						_this.$showToast('分享失败～');
					})
				},400);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.projectDetail{
		width: 100%;
		.detail_li{
			padding: 30rpx 24rpx 160rpx;
			font-size: 28rpx;
			color: #333;
			.d_l_tit{
				font-size: 36rpx;
				color: #1A1A1A;
				margin-bottom: 18rpx;
			}
			.text_w{
				text-indent: 48rpx;
			}
			.fb_user_info{
				padding: 20rpx 0;
				background-color: #fff;
				.fb_user_head{
					width: 72rpx;height: 72rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					image{border-radius: 50%;}
				}
				.fb_time{font-size: 22rpx;}
				.gz_pro_btn{
					color: #fff;
					@include flex_center;
					background-color: $ych_color;
					padding: 8rpx 20rpx;
					border-radius: 8rpx;
				}
			}
			.fb_pro_handle{
				padding: 12rpx 0 40rpx;
				color: #111A2B;
				font-size: 24rpx;
				.tip{
					color: #AFB2B8;
					font-weight: normal;
				}
			}
			.t_t_btn{
				padding: 0 8rpx;
				font-size: 22rpx;
				color: #0984FF;
				margin-right: 24rpx;
				border: solid 1rpx #0984FF;
				border-radius: 4rpx;
				@include flex_center;
			}


			.detail_image{
				width: 33.33%;
				margin-top: 24rpx;
				.autoImg{
					width: 218rpx;height: 218rpx;
				}
			}
			.biding_btn{
				width: 606rpx;
				height: 88rpx;
				background-color: $ych_color;
				border-radius: 12rpx;
				font-size: 30rpx;
				color: #fff;
				@include flex_center;
				margin:107rpx auto;
				@include box_shadow_btn;
			}
		}
	}
</style>
